<script lang="ts" setup>
//附加功能
import imgUrls from "@/assets/images/icon-Aa.svg";
import download from "@/assets/images/download-images.svg";
import { DocumentCopy, Download } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
const open2 = () => {
  ElNotification({
    title: "开发中",
    message: "功能开发中，敬请期待",
    type: "warning",
    offset: 150,
  });
};
</script>
<template>
  <ul class="docsanddownloads__list">
    <li class="docsanddownloads__item">
      <!--标识-->
      <div class="docsanddownloads__icon-wrapper">
        <figure class="docsanddownloads__icon">
          <el-image :src="imgUrls" fit="cover" lazy />
        </figure>
      </div>
      <!--内容-->
      <div class="docsanddownloads__text-wrapper">
        <p class="docsanddownloads__text">新闻文章</p>
        <div class="docsanddownloads__link">
          <el-button text @click="open2">
            拷贝文本
            <el-icon class="el-icon--right blank_icon"
              ><DocumentCopy
            /></el-icon>
          </el-button>
        </div>
      </div>
    </li>
    <li class="docsanddownloads__item">
      <!--标识-->
      <div class="docsanddownloads__icon-wrapper">
        <figure class="docsanddownloads__icon">
          <el-image :src="download" fit="cover" lazy />
        </figure>
      </div>
      <!--内容-->
      <div class="docsanddownloads__text-wrapper">
        <p class="docsanddownloads__text">本文中的图片</p>
        <div class="docsanddownloads__link">
          <el-button text @click="open2">
            下载全部图片
            <el-icon class="el-icon--right blank_icon">
              <Download />
            </el-icon>
          </el-button>
        </div>
      </div>
    </li>
  </ul>
</template>
<style lang="less" scoped>
.docsanddownloads__list {
  background-color: #f5f5f7;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.docsanddownloads__item {
  border-bottom: 1px solid #fff;
  display: flex;
  align-items: center;
  list-style: none;
  padding-bottom: 36px;
  padding-top: 36px;
  margin: 0 36px;
}
.docsanddownloads__icon-wrapper {
  display: flex;
  padding-right: 12px;
  flex: 0 0 24px;
  justify-content: flex-end;
}
//标志
.docsanddownloads__icon {
  display: inline-block;
  height: 24px;
  width: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.docsanddownloads__text-wrapper {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}
.docsanddownloads__text {
  font-size: 19px;
  line-height: 1.21053;
  font-weight: 700;
  letter-spacing: 0.012em;

  flex: 1 1 auto;
}
.docsanddownloads__link {
  flex: 0 0 auto;
  margin: 0;
  margin-left: 24px;
  position: relative;
  button {
    white-space: nowrap;
    border-radius: 30px;

    transition: background-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      border-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms;
    font-size: 14px;
    line-height: 1.42859;
    font-weight: 700;
    letter-spacing: -0.016em;

    padding: 8px 16px;
    background: #fff;
    color: #161617;
  }
}
@media only screen and (max-width: 1068px) {
  .docsanddownloads__item {
    margin: 0 32px;
    padding-bottom: 32px;
    padding-top: 32px;
  }
  .docsanddownloads__text {
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 700;
  }
}
@media only screen and (max-width: 734px) {
  .docsanddownloads__item {
    align-items: flex-start;
    margin: 0 24px;
    padding-bottom: 24px;
    padding-top: 24px;
  }
  .docsanddownloads__text-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .docsanddownloads__link {
    margin-left: 0;
    margin-top: 12px;
    button {
      white-space: normal;
      word-break: break-word;
    }
  }
}
</style>
